import { Steps, Table } from 'nextra/components'
import { Callout } from '@/components'

# 설치하기

<Steps>

### 지원 브라우저 확인하기

Suspensive 라이브러리는 모던 브라우저를 위해 최적화되었습니다. 아래 브라우저에 호환되도록 설정되어 있습니다.

<br />

<Table>
  <tbody>
    {[
      { browser: 'Chrome', version: '>= 51' },
      { browser: 'Firefox', version: '>= 53' },
      { browser: 'Edge', version: '>= 18' },
      { browser: 'Safari', version: '>= 11' },
      { browser: 'iOS', version: '>= 11' },
      { browser: 'Opera', version: '>= 38' },
    ].map((item) => (
      <Table.Tr key={item.browser}>
        <Table.Td>{item.browser}</Table.Td>
        <Table.Td className="text-center">{item.version}</Table.Td>
      </Table.Tr>
    ))}
  </tbody>
</Table>

> 당신의 환경에 따라, polyfills추가가 필요할 수도 있습니다. 더 오래된 브라우저를 지원하려면, 스스로 node_modules에서 라이브러리를 transpile할 필요가 있습니다.

### react, @tanstack/react-query 버전 확인하기

<br />

<Table>
  <tbody>
    {[
      { library: 'react', version: '^18 || ^19' },
      { library: '@tanstack/react-query', version: '^4 || ^5' },
    ].map((item) => (
      <Table.Tr key={item.library}>
        <Table.Td>{item.library}</Table.Td>
        <Table.Td className="text-center">{item.version}</Table.Td>
      </Table.Tr>
    ))}
  </tbody>
</Table>

### 의존성 추가

[![npm version](https://img.shields.io/npm/v/@suspensive/react-query?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-query)

@suspensive/react-query는 npm에 있습니다.
2.2.0 버전 이후로는 @tanstack/react-query의 v4와 v5을 모두 지원합니다. package.json의 dependencies에 @tanstack/react-query의 버전에 따라 자동으로 알맞는 @suspensive/react-query 버전을 사용하게 됩니다.

최신 안정버전을 사용하고자 하면 아래 커맨드를 실행하세요.

```shell npm2yarn
npm install @suspensive/react-query @suspensive/react @tanstack/react-query
```

@tanstack/react-query v4를 사용하고자 하면 아래 커맨드를 실행하세요.
@tanstack/react-query v4는 @tanstack/react-query v5 보다 [더 낮은 버전의 브라우저를 지원](/ko/docs/react-query/motivation#tanstackreact-query-v5의-es-private-field로-인해-저버전의-브라우저를-지원하지-못하는-문제를-해결합니다)합니다.

```shell npm2yarn
npm install @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

<Callout type='info'>

@suspensive/react-query는 내부적으로 peerDependencies로 @tanstack/react-query v4 혹은 v5를 사용합니다. 때문에 package.json의 dependencies에 @tanstack/react-query의 올바른 버전이 설치되어있는지 확인하세요. 이유는 [어떤 이유로 사용하나요?](/docs/react-query/motivation)에서 설명하고 있습니다.

</Callout>

</Steps>
